<template>
  <div style="height:100%;">
    <el-container :class="['home-container']">
      <el-header>
        <div class="header-left-div">
          <img class="logo-lq-img" src="../assets/logo.png"/>
          <span class="header-title">电商后台管理系统</span>
        </div>
        <div class="header-right-div">
          <el-dropdown @command="handleCommand" size="medium">
            <span class="el-dropdown-link" style="color: white;">
              <span style="color: white;">{{username.charAt(0).toUpperCase()}}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" style="width: 150px;font-size: 18px;">
              <el-dropdown-item command="user" icon="el-icon-user" divided>{{username}}</el-dropdown-item>
              <el-dropdown-item command="logout" icon="el-icon-s-unfold" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-container>
        <el-aside :width="isCollapse?'64px':'200px'">

          <div class="toggle-btn" @click="handleToggleButtonClick()">|||</div>

          <!--侧边栏菜单-->
          <el-menu ref="menuRef"
                   default-active="2"
                   class="el-menu-vertical-demo"
                   @open="handleOpenMenu"
                   @close="handleCloseMenu"
                   background-color="#3B3F4A"
                   text-color="#fff"
                   :collapse="isCollapse"
                   :collapse-transition="false"
                   unique-opened
                   :router="true"
                   :default-active="defaultActive"
          >

            <el-submenu :index="''+menu.id" v-for="menu in menus" :key="menu.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{menu.name}}</span>
              </template>


              <el-menu-item :index="submenu.path" v-for="submenu in menu.children" :key="submenu.id"
                            @click="handleMenuItemClick(submenu.path)">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>{{submenu.name}}</span>
                </template>
              </el-menu-item>

            </el-submenu>

          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>

    </el-container>
  </div>
</template>

<script>
  import {removeToken, removeTokenHead, removeTokenHeaderName,getUser} from "../util/auth";
  import {mapState} from 'vuex'
  import {readyImageServerFunction} from "../funcs/commons";

  export default {
    name: "Home",
    data() {
      return {
        menus: {},
        isCollapse: false,
        defaultActive: ''
      }
    },
    created() {
      if(!this.$store.state.rbac.user) {
        // 将用户信息保存到vuex中
        this.$store.commit("setUser", getUser());
      }
      //准备好角色
      if (!this.$store.state.rbac.roles || this.$store.state.rbac.roles.length == 0) {
        this.api.__api__RolesAll().then(data => {
          this.$store.commit("setRoles", data.data);
        }).catch(error => {
          console.error(error);
        })
      }
      this.loadMenusFunction();
      this.loadPrivilegesFunction();
      readyImageServerFunction();
    },

    computed: {
      ...mapState({
        username: state => state.auth.user.username
      })
    },

    methods: {

      //加载菜单
      loadMenusFunction() {
        this.api.__api__Menus()
          .then(data => {
            this.menus = data.data;
          }).catch(error => {
          console.error(error);
        })
      },


      // 加载所有权限数据
      loadPrivilegesFunction() {
        this.api.__api__PrivilegesAll()
          .then(data => {
            this.$store.commit("setPrivileges", data.data);
          }).catch(error => {
          console.error(error);
        })
      },

      //登出按钮回调
      handleLogoutButtonClick() {
        this.api.__api__Logout()
          .then(data => {
            removeToken();
            removeTokenHead();
            removeTokenHeaderName();
            this.$store.commit('setUser', {});
            this.$router.push('/login', onComplete => {
            }, onAbout => {
            });
          })
          .catch(error => {
            console.error(error);
          })

      },

      handleCommand(command){
        if(command=='logout'){
          this.handleLogoutButtonClick();
        }
      },

      //菜单项点击回调
      handleMenuItemClick(activeIndex) {

      },

      //菜单折叠回调
      handleToggleButtonClick() {
        this.isCollapse = !this.isCollapse;
      },

      //菜单项展开回调
      handleOpenMenu(key, keyPath) {

      },

      //菜单项收起回调
      handleCloseMenu(key, keyPath) {

      }
    }
  }
</script>

<style scoped>
  .header-left-div {
    height: 100%;
    width: 300px;
    padding: 10px;
    float: left;
  }

  .header-title {
    color: white;
    font-size: 30px;

    position: relative;
    top: -20px;
  }

  .logo-lq-img {
    width: 50px;
    height: 50px;

    position: relative;


  }

  .header-logout-btn {
    float: right;
    color: white;
    background-color: #909399;
    padding: 10px;
    border: 1px solid white;
    border-radius: 5px;
    margin-bottom: 8px;
    margin-top: 0px;
  }

  .el-header {
    background-color: rgb(114, 142, 172);
  }

  .el-aside {
    background-color: rgb(58, 63, 75);

  }

  .el-menu {
    border-right: 0px;
  }

  .el-main {
    background-color: #fff;
  }


  .home-container {
    height: 100%;
    background-color: red;
  }

  .toggle-btn {
    height: 20px;
    color: white;
    text-align: center;
    background-color: #4a5064;
    font-size: 10px;
    letter-spacing: 0.2em;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header-right-div {
    width: 200px;
    float: right;
    margin: 15px;

  }

</style>
